<template>
  <el-container>
    <el-aside width="200px">
      <el-scrollbar wrap-style="height:calc(100vh - 175px);">
        <el-tree
          style="max-width: 600px"
          :data="treeData"
          node-key="id"
          :expand-on-click-node="false"
          @node-click="clickTreeNode"
        >
          <template #default="{ node }">
            <template v-if="node.data.type == 'system'">
              <Icon icon="eos-icons:system-re-registered" color="#009ad6" hoverColor="#009ad6" />
              <span class="ml-1">{{ node.data.sysName }}</span>
            </template>
            <template v-else>
              <Icon
                icon="material-symbols:format-list-bulleted-rounded"
                color="#007d65"
                hoverColor="#007d65"
              />
              <span class="ml-1">{{ t(node.data.menuTitle) }}</span>
            </template>
          </template>
        </el-tree>
      </el-scrollbar>
    </el-aside>
    <WsmTable
      ref="table"
      v-model="queryFormType"
      load-url="/rbac-server/rbac/permission/page"
      :query-type="queryFormType"
      :change-load="true"
    >
      <template #title>{{ title }}</template>
      <template #query="{ data }">
        <el-form-item :label="t('rbac.permission.permAction')">
          <el-radio-group v-model="data.permAction.value">
            <el-radio value="">{{ t('rbac.permission.all') }}</el-radio>
            <el-radio value="0">{{ t('rbac.permission.disable') }}</el-radio>
            <el-radio value="1">{{ t('rbac.permission.enable') }}</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
      <template #button="{ row }">
        <el-button
          type="primary"
          @click="addForm.show()"
          v-hasPermi="'add'"
          v-if="initData.menuId"
          >{{ t('common.add') }}</el-button
        >
        <template v-if="row">
          <el-button v-hasPermi="'update'" @click="update(row.id)" type="primary">{{
            t('common.update')
          }}</el-button>
          <el-button v-hasPermi="'delete'" @click="del(row.id)" type="danger">{{
            t('common.delete')
          }}</el-button>
        </template>
      </template>
      <template #column>
        <el-table-column prop="permAction" :label="t('rbac.permission.permAction')" width="70">
          <template #default="scope">
            <template v-if="scope.row.permAction">
              <el-tag effect="dark" type="success">{{ t('rbac.permission.enable') }}</el-tag>
            </template>
            <template v-else>
              <el-tag effect="dark" type="danger">{{ t('rbac.permission.disable') }}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="permCode" :label="t('rbac.permission.permCode')" width="240" />
        <el-table-column prop="permName" :label="t('rbac.permission.permName')" width="200" />
        <el-table-column prop="note" :label="t('rbac.permission.note')" />
      </template>
    </WsmTable>
  </el-container>

  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/rbac-server/rbac/permission/add"
    label-width="100px"
    :init-data="initData"
    :title="t('rbac.permission.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="permCode" :label="t('rbac.permission.permCode')">
            <el-input v-model="form.permCode" :placeholder="t('rbac.permission.permCode')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="permName" :label="t('rbac.permission.permName')">
            <el-input v-model="form.permName" :placeholder="t('rbac.permission.permName')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="permAction" :label="t('rbac.permission.permAction')">
            <el-radio-group v-model="form.permAction">
              <el-radio value="0">{{ t('rbac.permission.disable') }}</el-radio>
              <el-radio value="1">{{ t('rbac.permission.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="permUrl" :label="t('rbac.permission.permUrl')">
            <el-cascader
              style="width: 100%"
              v-model="form.permUrl"
              :placeholder="t('rbac.permission.permUrl')"
              :options="appPaths"
              :props="permProps"
              filterable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('rbac.permission.note')">
            <el-input
              type="textarea"
              v-model="form.note"
              :placeholder="t('rbac.permission.note')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/rbac-server/rbac/permission/get"
    submit-url="/rbac-server/rbac/permission/update"
    label-width="100px"
    :title="t('rbac.permission.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="permCode" :label="t('rbac.permission.permCode')">
            <el-input v-model="form.permCode" :placeholder="t('rbac.permission.permCode')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="permName" :label="t('rbac.permission.permName')">
            <el-input v-model="form.permName" :placeholder="t('rbac.permission.permName')" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="permAction" :label="t('rbac.permission.permAction')">
            <el-radio-group v-model="form.permAction">
              <el-radio :value="false">{{ t('rbac.permission.disable') }}</el-radio>
              <el-radio :value="true">{{ t('rbac.permission.enable') }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="permUrl" :label="t('rbac.permission.permUrl')">
            <el-cascader
              style="width: 100%"
              v-model="form.permUrl"
              :placeholder="t('rbac.permission.permUrl')"
              :options="appPaths"
              :props="permProps"
              filterable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item prop="note" :label="t('rbac.permission.note')">
            <el-input
              type="textarea"
              v-model="form.note"
              :placeholder="t('rbac.permission.note')"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </WsmForm>
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { reactive, ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { treeApi } from '@/api/rbac/menu'
import { delApi } from '@/api/rbac/permission'

import { ElMessageBox } from 'element-plus'
import { OrgTreeDataType } from '../Org/types'
import { getAppPathsApi } from '@/api/dbms/microservices'

const { t } = useI18n()

const treeData = ref([])

//列表标题
const title = ref(t('rbac.permission.treeRoot'))

//新增表单对象
const addForm = ref()
const initData = ref({
  menuId: '',
  permAction: '1'
})
const addData: FormDataType = reactive({
  menuId: '',
  permName: '',
  permCode: '',
  permUrl: '',
  permAction: '1',
  note: ''
})

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  id: '',
  menuId: '',
  permName: '',
  permUrl: '',
  permCode: '',
  permAction: true,
  note: ''
}

//表格对象
const table = ref()

const initParams = (data) => {
  if (data.type == 'menu') {
    title.value = '[' + t(data.menuTitle) + ']' + t('rbac.permission.treeRoot')
    initData.value.menuId = data.id
    queryFormType.menuId.value = data.id
  }
}

//加载树数据
const loadTree = async () => {
  const rs = await treeApi()
  if (rs.success) {
    treeData.value = rs.data
  }
}

//树数据首次加载
loadTree()

//权限数据
const appPaths = ref([])

const permProps = { emitPath: false }

const loadAppPaths = async () => {
  const rs = await getAppPathsApi()
  if (rs.success) {
    appPaths.value = rs.data
  }
}

loadAppPaths()

//树的点击事件
const clickTreeNode = (data: OrgTreeDataType) => {
  initParams(data)
  table.value.load(1)
}

const queryFormType: QueryFormType = {
  menuId: {
    value: 'NaN',
    clear: false
  },
  permAction: {
    value: '',
    queryType: QueryType.EQ
  }
}

const update = (id: string) => {
  updateForm.value.show({ id })
}
const del = async (id: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(id)
    if (rs.success) {
      table.value.load(1)
    }
  })
}
const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
